<template>
  <div>
    <h1>App</h1>
    <button @click="open = true">Open</button>

    <div v-if="open">
      <Suspense>
        <div>
          <Hello />

          <hr />

          <World />

          <hr />
          <HelloWorld />
        </div>

        <!-- 后备内容，统一的 -->
        <template #fallback>
          <Loading />
        </template>
      </Suspense>
    </div>

    <hr />
    
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue'
import Loading from './components/Loading.vue'
import HelloWorld from './components/HelloWorld.vue'

export default {
  components: {
    // Hello 组件是一个异步组件
    // Hello: defineAsyncComponent(() => import('./components/Hello.vue')),

    Hello: defineAsyncComponent({
      loader: () => import('./components/Hello.vue'),
      loadingComponent: Loading,
    }),

    World: defineAsyncComponent({
      loader: () => import('./components/World.vue'),
      loadingComponent: Loading,
    }),

    Loading,

    HelloWorld,
  },

  data() {
    return {
      open: false,
    }
  },
}
</script>
